<template>
	<!-- 巡检计划整改点位(列表) -->
	<view class="check-assets">
		<uni-card :title="lastData.inspPlanName">
			<template v-slot:title>
				<view class="card-title">
					<view>
						<text>{{lastData.inspPlanName}}</text>
					</view>
					<text class="right-txt color1">{{lastData.inspRecordStatusCn}}</text>
					<!-- <text class="right-txt color2">已结束</text> -->
				</view>
			</template>
			<uni-list :border="false">
				<uni-list-item>
					<template v-slot:body>
						<view class="slot-box" style="width: 100%;">
							<view>
								<uni-icons type="shop-filled" size="18" color="#198a6c"></uni-icons>
								<text>{{lastData.storeName}}</text>
							</view>
							<view class="check-name">
								<uni-icons type="calendar" size="14"></uni-icons>{{lastData.inspPlanStartTime}} 至
								{{lastData.inspPlanEndTime}}
							</view>
							<view class="check-name">
								<uni-icons type="compose" size="14"></uni-icons>{{lastData.inspPlanRemarks}}
							</view>
							<view class="check-name">
								计划巡检时间：{{lastData.addTime}}
							</view>
							<view style="display: flex;justify-content: space-between;">
								<text>总巡检项：{{lastData.inspItemQty+""}}</text>
								<text>合格项：{{lastData.inspItemOkQty+""}}</text>
								<view>
									不合格项：<text style="color: #f00;">{{lastData.inspItemNgQty+""}}</text>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>

		<view class="content">
			<uni-card>
				<template v-slot:title>
					<view class="card-title">
						<view>
							<uni-icons type="location-filled" size="18" color="#198a6c"></uni-icons>
							<text>巡检点位：{{inspPositionName}}</text>
						</view>
					</view>
				</template>
				<uni-list :border="false">
					<uni-list-item :border="false" :title="item.inspContentDtlName" v-for="(item,index) in cks">
						<template v-slot:footer>
							<text
								:style="{'color':item.inspResultCn=='不合格'?'#f00':'#8d8d8d'}">{{item.inspResultCn}}</text>
						</template>
					</uni-list-item>
					<!-- <uni-list-item :border="false" title="巡检备注" v-show="inspRecordDtl&&inspRecordDtl.execuRemarks">
						<template v-slot:footer>
							<text>{{inspRecordDtl.execuRemarks}}</text>
						</template>
					</uni-list-item>
					<uni-list-item :border="false" title="图片附件" v-show="inspRecordDtl&&inspRecordDtl.encls.length>0">
						<template v-slot:footer>
							<image :src="IMGVIEW+item.enclUrl" v-for="item in inspRecordDtl.encls" :key="item.enclId" class="imageSize"></image>
						</template>
					</uni-list-item> -->
				</uni-list>
				<view v-if="inspRecordDtl&&inspRecordDtl.execuRemarks">
					<text style="color: #3b4144;">巡检备注：</text>{{inspRecordDtl.execuRemarks}}
				</view>
				<view style="display: flex;align-items: center;" v-if="inspRecordDtl&&inspRecordDtl.encls.length>0">
					<view style="color: #3b4144;">图片附件：</view>
					<image :src="IMGVIEW+item.enclUrl" v-for="item in inspRecordDtl.encls" :key="item.enclId"
						class="imageSize" @click="previewImage(IMGVIEW+item.enclUrl)"></image>
				</view>
			</uni-card>
			<uni-card>
				<uni-forms-item label="整改备注" class="remarks">
					<uni-easyinput type="textarea" v-model="remarks" placeholder="请输入整改备注!" />
				</uni-forms-item>
				<uni-forms-item label="已有图片:" class="remarks" v-if="imageValue.length>0">
					<view class="havaImg">
						<view class="imgs" v-for="(item,index) in imageValue" :key="index">
							<image :src="item.url" mode="aspectFill" @click="previewImage(item.url)"></image>
							<uni-icons type="trash-filled" size="24"
								style="position: absolute;top: 10rpx;right: 10rpx;background-color: aliceblue;opacity: .8;"
								@click="delImg(index)" color="#333"></uni-icons>
						</view>
					</view>
				</uni-forms-item>
				<uni-forms-item label="上传图片:" class="remarks">
					<uni-file-picker file-mediatype="image" ref="files" :auto-upload="false" mode="grid" :limit="lim"
						@select="select" @delete="deleteFile" title="最多选择9张图片" />
				</uni-forms-item>
			</uni-card>

		</view>

	</view>
	<view :class="{'bottom-btn':true,'permission-none':isPermission('INSP_IFR_SFR')}">
		<button class="start-button" @click="submit">提交</button>
	</view>

	<MessageTip ref="messageTip" :tipContent="'确认删除？'" @clickType="handleShowOrHideTip" />
</template>

<script lang="ts" setup>
	import {
		ref,
		computed
	} from "vue";
	import {
		onPullDownRefresh,
		onReachBottom,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		getMainInfo,
		contentDtls,
		rectifySub
	} from '@/common/api/inspectionAPI.ts';
	import {
		batchUpload
	} from '@/common/util/request.ts'; //上传文件接口
	import {
		IMGVIEW
	} from '@/common/config/config.ts';
	import {
		isPermission
	} from '@/common/util/common.ts'

	const lastData = ref({})
	const inspPositionId = ref()
	const listData = ref({})
	const version = ref()
	const cks = ref([])
	const thisInfo = ref()
	const remarks = ref('')
	const imgPath = ref([]); // 文件列表
	const imageValue = ref([]);
	const inspPositionName = ref('')
	const messageTip = ref()
	const inspRecordDtl = ref({
		execuRemarks: '',
		encls: []
	})

	onLoad((par) => {
		inspPositionId.value = par.inspPositionId
		// 头部卡片数据
		getMainInfo(par.inspRecordId).then(value => {
			lastData.value = value.data
			version.value = value.data.version
		})
		if (!isPermission('INSP_RECORD_DTL_QUERY')) {
			// 已有数据加载
			contentDtls(par.inspRecordId, par.inspPositionId, 0).then(value => {
				thisInfo.value = value.data
				remarks.value = value.data.inspRectify.rectifyRemarks
				inspPositionName.value = value.data.inspRectify.inspPositionName
				value.data.contentDtls.forEach(item => {
					cks.value.push(item)
				})
				inspRecordDtl.value = value.data.inspRecordDtl
				// 附件拿来显示
				try {
					value.data.inspRectify.encls.forEach(item => {
						imageValue.value.push({
							url: IMGVIEW + item.enclUrl,
							extname: 'png',
							name: item.enclName,
							enclId: item.enclId
						})
					})
				} catch (error) {
					console.log(error)
				}

			})
		}


	})

	// 选择文件
	const select = (res) => {
		imgPath.value = imgPath.value.concat(res.tempFilePaths);
	}

	// 删除文件
	const deleteFile = (res) => {
		imgPath.value.forEach((em: any, i: Number) => {
			if (em == res.tempFilePath) {
				imgPath.value.splice(i, 1)
			}
		})
	}

	// 删除图片
	const yesDel = ref([])

	const delImg = (index) => {
		messageTip.value.openTip()
	}
	const handleShowOrHideTip = (type: String) => {
		if (type == 'yes') {
			imageValue.value[index].operType = 1
			yesDel.value.push(imageValue.value[index])
			imageValue.value.splice(index, 1)
		}
	}
	const lim = computed(() => {
		return (9 - (imageValue.value.length)) + ''
	})

	const submit = async () => {
		// 附件处理
		let sysEnclRequestList = []; //附件列表
		yesDel.value.forEach(item => {
			sysEnclRequestList.push(item);
		})
		if (imgPath.value.length > 0) {
			await batchUpload(imgPath.value).then((res: any) => {
				let resData = JSON.parse(res);
				if (resData.code == 0) {
					resData.data.forEach((em: any) => {
						sysEnclRequestList.push({
							enclMode: 0,
							enclType: 2, //附件类型 2：图片 3：视频
							enclUrl: em.path,
							operType: 2, //	操作符:0-不变,1-删除,2-新增,3-修改
						})
					})
				} else {
					// 上传文件失败！
					uni.showToast({
						title: res.message,
						icon: "none"
					});
				}
			})
		}
		if (!isPermission('INSP_IFR_SFR')) {
			rectifySub([{
				encls: sysEnclRequestList,
				inspRecordId: thisInfo.value.inspRectify.inspRecordId,
				inspRectifyListId: thisInfo.value.inspRectify.inspRectifyListId,
				rectifyRemarks: remarks.value,
				version: thisInfo.value.inspRectify.version
			}]).then(value => {
				if (value.code == 0) {
					uni.showToast({
						icon: "none",
						title: value.message,
						duration:500
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 500)
				} else {
					uni.showToast({
						icon: "none",
						title: value.message
					})
				}
			})
		}


	}

	onPullDownRefresh(() => {});
	onReachBottom(() => {})
	
	const previewImage = (urls: any) => {
		console.log('------------', urls);
		let suffix = urls.split('.')[urls.split('.').length - 1]
		// console.log(suffix);
		let img = ['jpg', 'png', 'webp', 'jpeg']
		if (img.includes(suffix)) {
			// urls = [imgURL + urls]
			console.log(urls);
			uni.previewImage({
				current: 0,
				urls: [urls],
				//长按操作
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {},
					fail: function(err) {}
				}
			})
		} 
	
	}
</script>

<style scoped lang="scss">
	// uni-page-body {
	// 	height: 100%;
	// }

	.check-assets {
		height: 100%;
		// background-color: #f4f4f4;
		padding-bottom: 80px;
		// .segmented-control {
		// 	background-color: #fff;
		// }
	}

	.content {
		:deep(.uni-list-item__container) {
			padding: 5px 0px !important;
		}

		.imageSize {
			width: 60px;
			height: 60px;
		}
	}

	.card-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #ebeef5;
		position: relative;

		.right-txt {
			font-size: 12px;
			color: #fff;
			padding: 5rpx 20rpx;
			box-sizing: border-box;
			border-radius: 18rpx 0 0 18rpx;
			position: absolute;
			right: -20rpx;
		}

		.color1 {
			background-color: #7098ed;
		}

		.color2 {
			background-color: #999999;
		}
	}

	.uni-list-item {
		font-size: 14px !important;

		.check-time {
			color: #fda659;
		}
	}

	.check-name {
		font-size: 12px;
	}

	.footer-btn {
		display: flex;
	}

	.list-btn {
		background-color: #198a6c;
		color: #fff;
		line-height: 2;
		font-size: 14px;
		margin-left: 10rpx;
	}

	.top-text {
		color: #fd8f1a;
	}

	.start-button {
		width: 60%;
		box-sizing: border-box;
		background-color: #fe8f1b;
		line-height: 2;
		color: #fff;
	}

	.change-point {
		border-color: #fe8f1b;
		color: #fe8f1b;
		height: 50rpx;
		line-height: 50rpx;
		box-sizing: border-box;
		font-size: 14px;
		padding: 0rpx 50rpx;
		border-radius: 25rpx;
	}

	.havaImg {
		display: flex;
		flex-flow: row wrap;
	}

	.imgs {
		width: 150rpx;
		height: 150rpx;
		box-sizing: border-box;
		padding: 10rpx;
		position: relative;
	}

	.imgs>image {
		width: 100%;
		height: 100%;
	}

	.imgs>uni-icons {
		position: absolute;
		color: #198a6c;
	}

	:deep(.uni-forms-item__label) {
		flex: .8 !important;
		height: auto !important;
	}

	:deep(.uni-forms-item__inner) {
		padding-bottom: 6px !important;
	}

	.remarks {
		:deep(.uni-forms-item__label) {
			flex: .3 !important;
		}
	}
</style>
